import { useState } from "react";

export enum DanmuMsgTypeEnum {
  danmu,
  otherJoin,
  userLeaved,
}

const noticeMap = {
  [DanmuMsgTypeEnum.danmu]: { title: "", subtitle: "" },
  [DanmuMsgTypeEnum.otherJoin]: { title: "系统通知：", subtitle: "进入直播！" },
  [DanmuMsgTypeEnum.userLeaved]: {
    title: "系统通知：",
    subtitle: "离开直播！",
  },
};

const Home: React.FC<{ roomId: string }> = (props) => {
  const [roomNoLive, setRoomNoLive] = useState(false);
  const [giftList, setGiftList] = useState([
    { name: "鲜花", ico: "", price: "免费" },
    { name: "肥宅水", ico: "", price: "2元" },
    { name: "小鸡腿", ico: "", price: "3元" },
    { name: "大鸡腿", ico: "", price: "5元" },
    { name: "一杯咖啡", ico: "", price: "10元" },
  ]);

  //   setGiftList();

  return (
    <div className="pull-wrap">
      {roomNoLive ? (
        <template>当前房间没在直播</template>
      ) : (
        <template>
          <Left props={{ roomId: props.roomId, giftList }} />
          <Right props={{ roomId: props.roomId, damuList: [], noticeMap }} />
        </template>
      )}
    </div>
  );
};

const Left = (props: any) => {
  return (
    <div className="left">
      <div ref="topRef" className="head">
        <div className="info">
          <div className="avatar"></div>
          <div className="detail">
            <div className="top">房间号：{props.roomId}</div>
            <div className="bottom">
              <span>你的socketId：{getSocketId()}</span>
            </div>
          </div>
        </div>
      </div>
      <div className="video-wrap">
        <video
          id="localVideo"
          ref="localVideoRef"
          autoplay
          webkit-playsinline="true"
          playsinline
          x-webkit-airplay="allow"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          x5-video-orientation="portraint"
          muted
          controls
        ></video>
      </div>
      <div ref="bottomRef" className="gift">
        {props.giftList.map((gift: any) => (
          <div className="item">
            <div className="ico"></div>
            <div className="name">{gift.name}</div>
            <div className="name">{gift.name}</div>
            <div className="price">{gift.price}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Right = (props: any) => {
  return (
    <div className="right">
      <div className="tab">
        <span>在线用户</span>
        <span> | </span>
        <span>大航海</span>
      </div>
      <div className="user-list">
        {props}
        {props.liveUserList.map((user: any) => (
          <div className="item">
            <div className="info">
              <div className="avatar"></div>
            </div>
          </div>
        ))}
        {props.liveUserList.map((user: any) => (
          <div className="item">
            <div className="info">
              <div className="avatar"></div>
              <div className="nickname">{user.socketId}</div>
            </div>
            <div className="expr">{user.expr}</div>
          </div>
        ))}
      </div>

      <div className="danmu-list">
        {props.damuList.map((item: any) => (
          <template>
            <span className="name">
              {noticeMap[item.msgType].title || item.socketId}：
            </span>
            <span className="msg">{noticeMap[item.msgType].subtitle}</span>
          </template>
        ))}
      </div>
      <div className="send-msg">
        <textarea v-model="danmuStr" className="ipt"></textarea>
        <div className="btn" onClick={sendDanmu}>
          发送
        </div>
      </div>
    </div>
  );
};

const getSocketId = () => {
  return "";
};

const sendDanmu = () => {};

export default Home;
